import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import SignUpBtn from '@/components/SignUpBtn'
import Pricing from '@/components/Pricing'
import Faq from '@/components/Faq'
import WhyUse from '@/components/WhyUse'
import Work from '@/components/Work'
import DemoVideo from '@/components/DemoVideo'
import BannerImage from '@/images/banner.png'
import Image from 'next/image'

export const metadata = {
  alternates: {
    canonical: 'https://www.redgrowth.app',
  },
}

export default function Home() {
  return (
    <div className="bg-[#ff4d4d] text-white">
      <Header />
      <header className="container mx-auto py-8 px-4 md:py-12 md:px-6">
        <div className="grid gap-6 md:grid-cols-3 md:gap-12">
          <div className="space-y-4">
            <h1 className="text-4xl font-bold tracking-tight md:text-5xl">
              The AI that talks about your product in the best places on Reddit for maximum visibility
            </h1>
            <p className="text-lg text-gray-200 md:text-xl">
              RedGrowth find thousands of potential customers and mention your product naturally.
            </p>
            <div className="flex space-x-2">
              <SignUpBtn />
            </div>
          </div>
          <div className="md:col-span-2 relative mx-auto overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
            <Image className="w-full" src={BannerImage} alt="" />
          </div>
        </div>
      </header>

      {/* <DemoVideo /> */}
      <WhyUse />
      <Work />
      <Pricing />
      <Faq />
      <Footer />
    </div>
  )
}
